<template>
	<view>
		<view class="search">
			<input type="text" v-model="keyword" @confirm="addTag" placeholder="请添加想搜索的Tag"
				placeholder-style="color:#ccc;font-size:26rpx;" class="addInput" focus="true" />
			<view class="searchBtn" @click="addTag">
				添加tag
			</view>
		</view>
		<view class="tag-list">
			<view v-for="(tag, index) in tags" :key="index" class="tag">
				<text>{{ tag }}</text>
				<text class="delete" @click="deleteTag(index)">×</text>
			</view>
		</view>
		<view class="result">
			<view v-if="goods" class="goods">
				<view v-for="(item,index) in goods" :key="index" @click="goGoodsDetail(item.id)">
					<goods-card>
						<template v-slot:headImg>
								<image :src="item.groupAvatar" mode="aspectFill" class="headImg"></image>
						</template>
						<template v-slot:groupName>
							{{item.groupName}}
						</template>
						<template v-slot:coverImg>
							<image :src="item.cover" mode="widthFix" class="coverImg"></image>
						</template>
						<template v-slot:goodsName>
							{{item.name}}
						</template>
						<template v-slot:tag>
							<view v-for="(tag, index) in item.tags" :key="index" class="tag">
							    <text>{{ tag }}</text>
							</view>
						</template>
						<template v-slot:price>
							<text style="font-size: 40rpx;color: red;">{{item.averagePrice}}</text>
						</template>
					</goods-card>
				</view>
			</view>
			<view v-if="failImgShow" class="noResule">
				<view class="" style="text-align: center;">
					抱歉，暂无搜索结果
				</view>
				<image src="/static/images/gugou/noResult.png" mode="aspectFill"></image>
			</view>
		</view>	
	</view>
</template>

<script>
	import goodsCard from '../../components/goodsCard/goodsCard.vue'
	import { getGoodsBySearch } from '@/api/home.js'
	export default {
		components:{
			goodsCard
		},
		data() {
			return {
				keyword: '',
				tags: [],
				failImgShow:false,
				goods:[],
				lastPageNo: -1,
				pageSize: 3,
			}
		},
		methods: {
			
			addTag() {
			    if (this.keyword.trim() !== '') {
			        this.tags.push(this.keyword);
			        this.keyword = ''; // 清空输入框
					this.getGoods()
			    }
			},
			getGoods(){
				getGoodsBySearch(this.tags).then(res => {
						if(res.data.code==200){
							if(res.data.data.length>0){
								this.goods=res.data.data
							}else{
								this.failImgShow=true
							}
						}else{
							this.failImgShow=true
						}
					})
			},
			deleteTag(index) {
			    this.tags.splice(index, 1);
				if(this.tags.length>0){
					this.getGoods()
				}else{
					this.goods=[]
					this.failImgShow=false
				}
			},
			goGoodsDetail(id){
					  uni.navigateTo({
					  	url:`/pages/goodsDetails/goodsDetails?goodsId=${id}`
					  })
			},
		}
	}
</script>

<style>
.search{
	width: 92%;
	height: 80rpx;
	line-height: 80rpx;
	margin: 36rpx auto 0;
	/* padding: 20rpx; */
	margin-bottom: 15rpx;
	font-size: 26rpx;
    border: 1rpx solid #8DC7DF;
	border-radius: 45rpx;
	position: relative;
	overflow: hidden;
}

.addInput {
    padding: 10rpx 20rpx;
	position: absolute;
	left: 0;
	width: 72%;
	height: 70rpx;
	line-height: 90rpx;
}
.searchBtn{
	position: absolute;
	right: 0;
	background-color: #E6F3F8;
	width: 140rpx;
	font-size: 26rpx;
	height: 80rpx;
	border-radius: 40rpx;
	text-align: center;
}

.tag-list {
    width: 90%;
	padding:0 20rpx;
	margin-bottom: 30rpx;
    /* margin: 0 auto; */
}

.tag {
    display: inline-block;
    height: 60rpx;
    padding: 0 16rpx;
    margin: 14rpx 9rpx;
    line-height: 60rpx;
    font-size: 26rpx;
    border: 1px solid #8DC7DF;
    border-radius: 30rpx;
}

.delete {
    padding: 0 12rpx;
    font-size: 26rpx;
    color: #999999;
}


/* 谷子 */
.result{
	padding: 0 30rpx;
}
.noResult{
	font-size: 30rpx;
	width: 100%;
	
}
.goods{
	/* display: flex;
	flex-wrap: wrap;
	height: 100vh; */
	column-count: 2;
	column-gap: 20rpx;
}

/* ------------------------ */
.groupInfo .headImg{
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
.goodsInfo .coverImg {
	width: 100%;
}
.tags .tag {
    display: inline-block;
    height: 40rpx;
    padding: 0 14rpx;
    margin: 10rpx 10rpx 10rpx 0;
    line-height: 40rpx;
	color: #347CD4;
    font-size: 20rpx;
    border-radius: 20rpx;
	background-color: #E3F1F7;
}

</style>
